<template>
  <div class="exchange-rate-test">
    <el-card>
      <template #header>
        <h3>汇率联动测试</h3>
      </template>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <template #header>
              <h4>汇率管理</h4>
            </template>
            
            <el-form label-width="120px">
              <el-form-item label="当前汇率">
                <el-input v-model="currentRate" readonly style="width: 200px;" />
              </el-form-item>
              <el-form-item label="新汇率">
                <el-input-number 
                  v-model="newRate" 
                  :precision="4" 
                  :step="0.0001" 
                  :min="0.001" 
                  :max="1"
                  style="width: 200px;"
                  placeholder="请输入新汇率"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updateRate">更新汇率</el-button>
                <el-button @click="resetRate">重置汇率</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        
        <el-col :span="12">
          <el-card>
            <template #header>
              <h4>会员列表预览</h4>
            </template>
            
            <el-table :data="memberPreview" border stripe style="width: 100%;">
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="nickname" label="昵称" width="120" />
              <el-table-column prop="memberType" label="类型" width="80" />
              <el-table-column prop="exchangeRate" label="汇率" width="100">
                <template #default="scope">
                  <span v-if="scope.row.memberType === 'B' || scope.row.memberType === 'C'">
                    {{ scope.row.exchangeRate || getDefaultExchangeRate() }}
                  </span>
                  <span v-else style="color: #c0c4cc;">--</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
      
      <el-card style="margin-top: 20px;">
        <template #header>
          <h4>测试说明</h4>
        </template>
        
        <div>
          <p><strong>测试步骤：</strong></p>
          <ol>
            <li>在"汇率管理"中输入新的汇率值（如：0.0500）</li>
            <li>点击"更新汇率"按钮</li>
            <li>观察"会员列表预览"中的汇率是否自动更新</li>
            <li>注意：所有B/C类会员都会显示实时汇率，没有mock数据</li>
            <li>汇率字段初始为null，显示时从基础设置实时获取</li>
          </ol>
          
          <p><strong>预期结果：</strong></p>
          <ul>
            <li>所有B/C类会员的汇率都会实时显示基础设置中的汇率</li>
            <li>汇率更新后，会员列表会立即反映变化</li>
            <li>不再有硬编码的mock汇率数据</li>
          </ul>
        </div>
      </el-card>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { exchangeRateService } from '@/services/exchangeRateService'

const currentRate = ref('')
const newRate = ref(0.0500)

// 创建测试会员数据
function createTestMemberData() {
  return Array.from({ length: 10 }, (_, i) => {
    const memberType = i % 2 === 0 ? 'B' : 'C'
    
    return {
      id: (10001 + i).toString(),
      nickname: `测试用户${i + 1}`,
      memberType: memberType,
      exchangeRate: null // 汇率字段初始化为null，只通过基础设置实时汇率和单独设置获取
    }
  })
}

const memberPreview = ref(createTestMemberData())

// 获取默认汇率（来自基础设置中的汇率管理）
function getDefaultExchangeRate() {
  // 从汇率服务获取当前汇率
  return exchangeRateService.getCurrentRate()
}

// 更新汇率
function updateRate() {
  if (!newRate.value || newRate.value <= 0) {
    ElMessage.warning('请输入有效的汇率值')
    return
  }
  
  try {
    exchangeRateService.setRate(newRate.value.toString(), '测试用户')
    currentRate.value = newRate.value.toString()
    ElMessage.success('汇率已更新')
  } catch (error: any) {
    ElMessage.error('更新汇率失败：' + (error.message || '未知错误'))
  }
}

// 重置汇率
function resetRate() {
  try {
    exchangeRateService.setRate('0.052', '测试用户')
    currentRate.value = '0.052'
    newRate.value = 0.052
    ElMessage.success('汇率已重置')
  } catch (error: any) {
    ElMessage.error('重置汇率失败：' + (error.message || '未知错误'))
  }
}

// 汇率变化监听器
exchangeRateService.addRateChangeListener((newRateValue) => {
  console.log('汇率已更新，刷新测试会员列表:', newRateValue)
  // 汇率更新时不需要重新生成数据，因为汇率字段现在都是null
  // 汇率显示通过getDefaultExchangeRate()函数实时获取
})

onMounted(() => {
  // 初始化当前汇率显示
  currentRate.value = exchangeRateService.getCurrentRate()
})
</script>

<style scoped>
.exchange-rate-test {
  padding: 24px;
}
</style> 